<template>
  <div class="class-table">
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
          <tr>
            <th>时间</th>
            <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'周' +
              digital2Chinese(weekIndex, 'week')}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(lesson, timeIndex) in classTableData.lessons" :key="timeIndex">
            <td>
              <p>{{'第' + digital2Chinese(timeIndex) + "节"}}</p>
              <p class="period">{{ lesson }}</p>
            </td>
            <td v-for="(course, weekIndex) in classTableData.courses" :key="weekIndex"
                @click="upadateLesson(course,weekIndex,timeIndex)">
              {{classTableData.courses[weekIndex][timeIndex] || ''}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-dialog title="课程名称" :visible.sync="dialogFormVisible">
      <el-input v-model="updateLesson = currCourse[currIndex]" autocomplete="off"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import api from '@/api/system/course'

  export default {
    data() {
      return {
        dialogFormVisible: false,
        updateLesson: '',  //更改的课程名
        currCourse: [],  //当前选中课程数组
        currIndex: 0,  //选中的数组位置
        classCourses: [], //服务器返回课程数组
        classTableData: {
          lessons: [
            '08:00-09:00',
            '09:00-10:00',
            '10:00-11:00',
            '11:00-12:00',
            '13:00-14:00',
            '14:00-15:00',
            '15:00-16:00',
            '16:00-17:00'
          ],
          courses: [
            // ['', '', '', '', '', '', '', ''],
            // ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
            // ['语文', '数学', '英语', '历史', '', '化学', '物理', '生物'],
            // ['生物', '', '化学', '政治', '历史', '英语', '数学', '语文'],
            // ['语文', '数学', '英语', '历史', '政治', '', '物理', '生物'],
            // ['生物', '物理', '化学', '', '历史', '英语', '数学', '语文'],
            // ['语文', '数学', '英语', '', '', '', '', ''],
          ]
        }
      };
    },
    mounted() {
      console.log('dialogFormVisible', this.dialogFormVisible)
    },
    created() {
      this.getLessonInit()
    },
    methods: {
      getLessonInit() {
        api.getPageList().then((res) => {
          if (res.code === 200) {
            this.classTableData.courses = this.getObjturnArr(res.data)
            console.log('123', this.classTableData)
          }
        })
      },
      /**
       * 数字转中文
       * @param {Number} num 需要转换的数字
       * @param {String} identifier 标识符
       * @returns {String} 转换后的中文
       */
      digital2Chinese(num, identifier) {
        const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
        return identifier === 'week' && (num === 6) ? '日' : character[num + 1];
      },
      getObjturnArr(classArr) {
        return classArr.map(item => {
          if (item === null) return []
          let arr = Object.values(item)
          arr.shift()
          arr.forEach((course, index) => {
            if (course === null) {
              arr.splice(index, 1, '')
            }
          })
          return arr
        })
      },
      upadateLesson(course, weekIndex, timeIndex) {
        this.currCourse = course
        this.currIndex = timeIndex
        this.currWeek = weekIndex + 1
        console.log('course', course)
        console.log('week', weekIndex + 1)
        console.log('index', timeIndex + 1)
        this.dialogFormVisible = this.$hasBP('bnt.sysCourse.update') === true
      },
      async update() {
        let {currCourse, currIndex} = this
        this.dialogFormVisible = false
        currCourse.splice(currIndex, 1, this.updateLesson)
        console.log(this.currCourse, this.currIndex, this.currWeek)
        let param = {
          id: this.currWeek,
          one: this.currCourse[0],
          two: this.currCourse[1],
          three: this.currCourse[2],
          four: this.currCourse[3],
          five: this.currCourse[4],
          six: this.currCourse[5],
          seven: this.currCourse[6],
          eight: this.currCourse[7],
        }
        let res = await api.update(param)
        console.log('res', res)
        this.updateLesson = ''
      }
    }
  };
</script>

<style lang="scss" scoped>
  .class-table {
    .table-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .tabel-container {
      margin: 7px;
      table {
        table-layout: fixed;
        width: 100%;
        thead {
          background-color: #1C2638;
          th {
            color: #fff;
            line-height: 17px;
            font-weight: normal;
          }
        }
        tbody {
          background-color: #eaf2ff;
          td {
            color: #677998;
            line-height: 12px;
          }
        }
        th,td {
          width: 60px;
          padding: 12px 2px;
          font-size: 18px;
          text-align: center;
          font-weight: bold;
        }
        tr td:first-child {
          color: #333;
          .period {
            font-size: 15px;
          }
        }
      }
    }
  }
</style>
